<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./assets/index.css" />
    <style>
        html {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(225deg, #fab6b6, #fff);
        }
        .form-dl {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            box-shadow: 0 0 10px 5px #aaa;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :model="form" label-width="auto" style="max-width: 200px" id="registerForm" class="form-dl" >
            <el-form-item label="登录名">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.pwd" show-password ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doSubmit">Register</el-button>
                <el-button type="reset" @click="doReset" >Reset</el-button>
            </el-form-item>
            <hr>
            <el-link href="./login.html" type="primary" >有账号，去登录？</el-link>
        </el-form>
    </div>
    <script src="./assets/vue.global.prod.js"></script>
    <script src="./assets/index.full.js"></script>
    <script src="./assets/index.iife.min.js"></script>
    <script src="./assets/axios.min.js"></script>
    <script src="./assets/film.js"></script>
    <script>
        const { createApp } = Vue;
        let app = createApp({
            data() {
                return {
                    form: {
                        name: '',
                        pwd: ''
                    }
                }
            },
            methods: {
                async doSubmit() {
                    console.log('form:', this.form);

                    try {
                        const resp = await axios.post('/user/register', {
                            loginName: this.form.name,
                            pwd: this.form.pwd,
                        });
                        let result = resp.data;
                        console.log('result:', result);
                        if(result.success){
                            //成功
                            this.$message.success(result.msg);
                            //去 登录
                            location.href = 'login.html';
                        } else {
                            //失败
                            this.$message.error(result.msg);
                        }
                    } catch (error) {
                        console.log('error:', error);
                    }
                },
                doReset() {
                    document.querySelector('#registerForm').reset();
                }
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>

</html>